<!--新闻类列表  目前主要是党工委-->
<template>
  <div class="page">
    <headerbar>{{channelName}}</headerbar>
    <section class="d-scroll-head list-news-img bg-white">
      <cube-scroll
        ref="scroll"
        :options="options"
        @pulling-up="onPullingUp"
        @pulling-down="onPullingDown"
        :scrollEvents="['scroll-end']"
        v-remainScrollCube="'newsChannel'+menuId"
      >
        <div class="item" @click="goDetail(item)" v-for="(item,index) in list" :key="index">
<!--          <div class="img" v-if="item.listPic">
            <img :src="tools.getImgUrl(item.listPic,true)" alt="">
          </div>-->
          <div class="img" v-if="tools.indexOfHttp(item.listPicUrl)">
            <img :src="item.listPicUrl" alt="">
          </div>
          <div class="img" v-else-if="item.listPic">
            <img :src="tools.getImgUrl(item.listPic,true)" alt="">
          </div>
          <div class="cont">
            <h2 class="title"><div class="hower">{{item.title}}</div></h2>
            <div :class="['tip',{'tip2': item.listPic}]">
              <span class="time">{{item.createTime.split(" ")[0]}}</span>
              <span class="source">{{item.source || '未知'}}</span>
<!--              <span class="view">阅读  {{item.views || 0}}</span>-->
              <broadcast :item="item"/>
            </div>
          </div>
        </div>
        <noData v-if="!hasList() && !isLoading"></noData>
        <onBottom v-else-if="onBottom"></onBottom>
      </cube-scroll>
    </section>

  </div>
</template>

<script>
  export default {
    name: 'newsChannel',
    data () {
      return {
        options: {
          pullUpLoad: true,
          scrollbar: false,
          pullDownRefresh: {
            txt: " ",
          },
        },
        pageIndex: 1,
        channelName: '',
        pageSize: 10,
        menuId: '',
        isLoading: true,
        list: [],
        onBottom:false,
      }
    },
    created () {
      console.log('created')
      this.$route.meta.keepAlive = true
//      this.$store.state.newsChannelNeedRefresh = true
      this.init()
    },
    activated () {
      console.log('activated')
//      this.init()
    },
    beforeRouteLeave(to, from, next) {
      this.$route.meta.keepAlive = to.name === 'redCloudNewsDetail'
      if(this.$route.meta.keepAlive) {
        this.$store.commit('addRoute','newsChannel')
      }else {
        this.$store.commit('removeRoute','newsChannel')
        this.$destroy()
      }
      next()
    },
    methods: {
      init () {
        if (this.$store.state.newsChannelMenuId !== this.$route.query.id || this.list.length <= 0) {
          this.pageIndex = 1
          this.$store.state.newsChannelMenuId = this.menuId = this.$route.query.id
          this.channelName = this.$route.query.channelName
          this.list = []
          this.fetchList()
        }
      },
      goDetail (item) {
        this.$store.state.newsDetail = item
        this.$router.push({name: 'redCloudNewsDetail', params: {id: item.id}, query: {channelName: this.channelName}})
      },
      fetchList (id) {
        this.onBottom = false;
        this.isLoading = true
        id = id || this.menuId
        let data = {
          "channelId": id || "",
          "pageNo": this.pageIndex,
          "pageSize": this.pageSize,
          "summary": "",
          "title": ""
        }
        return this.fetchService.contentPage(data).then(res => {
          this.isLoading = false;
          if (res.code !== 0) {
            return this.tools.alert(res.message || res.resp_msg)
          }
          if (res.code === 0 && res.data.page.length < 1) {
            this.onBottom = true;
            this.options.pullUpLoad = false;
            return;
          }
          this.isLoading = false
          this.pageIndex ++
          this.list = this.list.concat(res.data.page)
          setTimeout(() => {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
            this.options.isPullUpLoad = false
          }, 100)
          console.log('this.list', this, this.list)
          return res
        })
      },
      hasList () {
        return this.list.length > 0
      },
      onPullingUp () {
        this.fetchList()
      },
      onPullingDown() {
        console.log("onPullingDown");
        this.pageIndex = 1;
        this.list = [];
        this.onBottom = false;
        this.options.pullUpLoad = true;
        this.fetchList();
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  .list-news-img .item {
   .img {
     margin-right:20px;
   }
   .cont {
     margin-left:0;
     .tip{
       .time {
          width: pxToRem(150px);
       }
       .source{
          width: pxToRem(400px);
       }
       .view{
          width: pxToRem(100px);
       }
     }
     .tip2{
       .time {
          width: pxToRem(150px);
       }
       .source{
          width: pxToRem(200px);
       }
       .view{
          width: pxToRem(100px);
       }
     }
   }
 }
  .cont {
    .title {
      position: relative;
      height:3em;
      overflow:hidden;
    }
  }
  .hower{
    font-size: 16PX;
    font-weight: normal;
    /*min-height: 3em;*/
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-all;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
  }
</style>


